<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        .son{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 父子组件的简单使用 -->
    <div id="app">
        <father-component></father-component>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const sonComponent = Vue.extend({
            template:`
                <div class='son'>
                    我是一个子组件
                </div>
            ` 
        })
        const sonComponentTwo = Vue.extend({
            template:`
                <div class='son'>
                    我是第二个子组件
                </div>
            ` 
        })
        const fatherComponent = Vue.extend({
            template:`
                <div class='father'>
                    我是一个父组件
                    <son-component></son-component>
                    <son-component></son-component>
                    <son-componentTwo></son-componentTwo>
                </div>
            `,
            components:{
                'son-component':sonComponent,
                'son-componentTwo':sonComponentTwo
            }
        })
        const app = new Vue({
            el:'#app',
            data(){
                return {

                }
            },
            methods:{
                
            },
            components:{
                'father-component':fatherComponent
            }
        })
    </script>
</body>
</html>